<template>
	<view>
		
		<!-- 头部设置 -->
		<view :style="height" :class="bgColor">
			<view class="nav" :style="height" :class="bgColor + ' ' + (isFixed ? 'fixed' : '') ">
				<!-- 状态 -->
				<view class="flex p-xs mb-sm text-lg">
					<!-- 左 -->
					<view class="flex-twice padding-sm margin-xs radius">
						<view v-if="isBack" @tap="BackPage" >
							<text class="cuIcon-back text-black"></text>
							<text class="text-black">
								<slot name="backText"></slot>
							</text>
						</view>
						<view v-else>
							<slot name="backText"></slot>
						</view>
					</view>
					<!-- 中 -->
					<view class="flex-twice padding-sm margin-xs radius text-center text-black">
						<slot name="content"></slot>
					</view>
					<!-- 右 -->
					<view class="flex-twice padding-sm margin-xs radius text-right">
						<slot name="right"></slot>
					</view>
				</view>
				
				<!-- 查询 -->
				<view class="flex" v-if="isBottom">
					<view class="flex-sub radius">
						<slot name="bottom"></slot>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部设置 -->
		
	</view>
	
</template>

<script>
	export default {
		name: 'head-navigation1',
		data() {
			return {
				isHomeBack: this.HomeBackUrl
			};
		},
		onReady: function(res) {
			// #ifdef MP-ALIPAY
			this.isHomeBack = '';
			// #endif
		},
		onLoad: function (options) {
			let _this = this;
		},
		computed: {
			height() {
				var CustomBar= (this.isBottom ? (this.CustomBar * 2 - 20) : (this.CustomBar * 1));
				var StatusBar= this.StatusBar;
				var height = `height:${CustomBar}rpx;padding-top:${StatusBar}rpx;`;
				return height;
			},
			
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var bgColor = this.bgColor;
				
				var style = `height:${CustomBar}rpx;`;
				if (this.bgImage) {
					style = `height:${CustomBar}rpx;background-image:url(${bgImage});`;
				}
				if (this.bgColor) {
					style = `height:${CustomBar}rpx;background-color:${bgColor};`;
				}
				return style
			}
		},
		props: {
			
			CustomBar: {
				type: String,
				// #ifdef H5 
				default: '100', 
				// #endif
				// #ifdef MP-WEIXIN
				default: '120',
				// #endif
				// #ifdef MP-ALIPAY
				default: '120',
				// #endif
				// #ifdef APP-PLUS 
				default: '110'
				// #endif
			},
			
			StatusBar: {
				type: String,
				// #ifdef H5 
				default: '0', 
				// #endif
				// #ifdef MP-WEIXIN
				default: '30',
				// #endif
				// #ifdef MP-ALIPAY
				default: '60',
				// #endif
				// #ifdef APP-PLUS
				default: '20'
				// #endif
			},

			bgColor: {
				type: [String], 
				default: 'bg-yellow',
			},

			isFixed: {
				type: [Boolean, String], 
				default: true,
			},
			
			isBack: {
				type: [Boolean, String], 
				default: false,
			},
			
			isBottom: {
				type: [Boolean, String], 
				default: false,
			},
			
			bgImage: {
				type: String,
				default: '',
			},
			
			HomeBackUrl: {
				type: String,
				default: '',
			}
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			HomePage() {
				let _this = this;
				uni.redirectTo({
					url: _this.HomeBackUrl
				});
			},
			
		}
	}
</script>

<style>
	.cu-custom .cu-bar.fixed-bottom {
		display: block;
		padding: 20rpx 0 0 0;
	}
</style>
